<template>
  <div class="packages">
    <div class="container">
      <div class="aside">
        <div ref="refsTable">
          <el-form :model="queryParams" ref="queryForm" style="margin-top: 10px;margin-left: 10px;" label-width="70px"
            :inline="true">
            <el-form-item label="申请日期">
              <el-date-picker v-model="dateRange" style="width:400px" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item label="申请人" prop="userId">
              <el-select v-model="queryParams.userId" clearable placeholder="请选择" style="width:160px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="实验编号" prop="experimentNumber">
              <el-input v-model="queryParams.experimentNumber" placeholder="请输入实验编号" clearable style="width: 160px"
                @keyup.enter.native="handleQuery" />
            </el-form-item>


            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" clearable placeholder="请选择" style="width:160px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in stausName" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table stripe border highlight-current-row @row-click="handleClick" :data="lateList"
          @selection-change="handleSelectionChange" :height="heights" :header-cell-style="{
            background: '#ebebeb'
          }">
          <af-table-column type="index" align="center" label="序号"></af-table-column>
          <af-table-column align="center" label="实验编号" prop="experimentNumber" width="250">
          </af-table-column>
          <af-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
              {{ scope.row.status == 0 ? '待审核' : '已审核' }}
            </template>
          </af-table-column>
          <af-table-column prop="userName" align="center" label="姓名" width="100"></af-table-column>
          <af-table-column prop="projectTypeName" align="center" width="350" label="项目类型"></af-table-column>
          <af-table-column prop="nucleicTypeName" align="center" label="检测流程"></af-table-column>
        </el-table>
        <div>
          <pagination   style="margin:0;padding: 0;" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>

      </div>
      <div class="main">
        <div class="fontStyle">基本信息</div>
        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="110px">
          <el-form-item label="实验编号" prop="experimentNumber">
            <el-input v-model="form.experimentNumber" clearable @keyup.enter.native="handleSearch" placeholder="请输入实验编号"
              :disabled="addStaus" @blur="handleSearch" />
          </el-form-item>
          <el-form-item label="项目类型" prop="projectTypeName">
            <el-input v-model="form.projectTypeName" disabled clearable />
          </el-form-item>
          <el-form-item label="核酸类型" prop="nucleicTypeName">
            <el-input v-model="form.nucleicTypeName" disabled clearable />
          </el-form-item>
          <el-form-item label="样本类型" prop="sampleTypeName">
            <el-input v-model="form.sampleTypeName" disabled clearable />
          </el-form-item>
          <el-form-item label="状态" prop="stateId">
            <el-input v-model="mainStateName[form.stateId]" disabled clearable />
          </el-form-item>
          <el-form-item label="平台类型" prop="platformTypeName">
            <el-input v-model="form.platformTypeName" disabled clearable />
          </el-form-item>
          <el-form-item label="送检单位" prop="inspectionUnit">
            <el-input v-model="form.inspectionUnit" disabled clearable />
          </el-form-item>
          <el-form-item label="录入时间" prop="registerCreateDate">
            <el-input v-model="form.registerCreateDate" disabled clearable />
          </el-form-item>
          <el-form-item label="入库时间" prop="inputDate">
            <el-input v-model="form.inputDate" disabled clearable />
          </el-form-item>
          <el-form-item label="送检姓名" prop="submitName">
            <el-input v-model="form.submitName" disabled clearable />
          </el-form-item>

        </el-form>
        <div class="fontStyle">申请信息</div>
        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="110px">

          <el-form-item label="申请人" prop="userName">
            <el-input v-model="form.userName" clearable disabled />
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="form.phone" clearable disabled />
          </el-form-item>

          <el-form-item label="申请原因" prop="reasonId">
            <el-select v-model="form.reasonId" placeholder="请选择申请原因" clearable :disabled="saveStaus ? false : addStaus">
              <el-option v-for="item in reasonTemplateList" :key="item.id" :label="item.reasonName" :value="item.id" />
            </el-select>
          </el-form-item>



          <el-form-item label="预计报告时间" prop="expectedReportTime">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" clearable format="yyyy-MM-dd HH:mm:ss"
              v-model="form.expectedReportTime" type="datetime" placeholder="选择日期"
              :disabled="saveStaus ? false : addStaus">
            </el-date-picker>
          </el-form-item>

        </el-form>
        <div slot="footer" style="margin-top: 20px" class="dialog-footer">
          <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
          <el-button type="primary" size="small" :disabled="btnSave" @click="handleSave">保存</el-button>
          <el-button type="danger" size="small" :disabled="btnDel" @click="handleDel">删除</el-button>
          <el-button type="primary" size="small" :disabled="btnAudit" @click="handleAudit">审核</el-button>
          <el-button type="warning" size="small" :disabled="btnCancel" @click="handleCancel">取消审核</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  manageLate,
  manageLateSave,
  getDetailByExperimentNumber,
  manageLateDel,
  manageLateEdit
} from "@/api/auxiliary/assistManagement/late"
import { enumerate } from "@/api/dictionary/systemSetting/enumeration"
import { listUser } from "@/api/system/user"
import { reasonTemplate } from "@/api/dictionary/systemSetting/reasonTemplate"

export default {
  name: "late",
  data () {
    return {
      // btnAdd: false,
      btnSave: true,
      btnDel: true,
      btnAudit: true,
      btnCancel: true,
      saveStaus: false,
      // 总条数
      total: 0,
      addStaus: true,
      // 枚举表格数据
      lateList: [],
      reasonTemplateList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userId: '',
        experimentNumber: undefined,
        status: ''
      },
      // 表单参数
      form: {},
      rules: {
        reasonId: [
          { required: true, message: "请选择申请原因", trigger: ["blur"] }
        ],
        expectedReportTime: [
          { required: true, message: "请选择预计时间", trigger: ["blur"] }
        ]
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      //主流程状态
      mainStateName: {
        1: '已录入',
        2: '已登记',
        3: '已入库',
        4: '已提取',
        5: '已建库',
        6: '已测序',
        7: '已分析',
        8: '已初审',
        9: '已确认初审',
        10: '已复审',
        11: '已提交',
        12: '已上传',
        13: '不上传'
      },
      stausName: [
        {
          id: 0,
          name: '待审核'
        },
        {
          id: 1,
          name: '已审核'
        }
      ],
      userList: [],
      // 申请日期范围
      dateRange: [],
      heights: undefined
    }
  },
  created () {
    // this.dateRange[0] = this.parseTime(new Date((new Date).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
    // this.dateRange[1] = this.parseTime(new Date((new Date).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
    this.dateRange[0] = this.parseTime(new Date((new Date).getTime()), '{y}-{m}-{d}')
    this.dateRange[1] = this.parseTime(new Date((new Date).getTime() ), '{y}-{m}-{d}')
    this.getList()
    this.getEnumerate()
    this.getUserList()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      }
    })
  },
  methods: {
    /** 查询迟发列表 */
    getList () {
      manageLate(this.addParameter(this.queryParams, this.dateRange)).then((response) => {
        this.lateList = response.rows
        this.total = response.total
      })
    },
    getReason () {
      reasonTemplate().then(response => {
        response.rows.map(item => {
          if (item.enumerateId === this.enumerateId) {
            this.reasonTemplateList.push(item)
          }
        })
      })
    },
    getEnumerate () {
      enumerate().then((response) => {
        response.rows.map(item => {
          if (item.name === '迟发原因') {
            this.enumerateId = item.id
          }
        })
        this.getReason()
      })
    },
    getUserList () {
      listUser().then((response) => {
        this.userList = response.rows
      })
    },
    addParameter (params, dateRange) {
      var search = params
      search.startLateTime = ""
      search.endLateTime = ""
      if (null != dateRange && '' != dateRange) {
        search.startLateTime = dateRange[0]
        search.endLateTime = dateRange[1]
      }
      return search
    },
    handleAdd () {
      this.form = {}
      this.addStaus = false
      this.btnSave = false
      // this.btnAdd = true
    },
    //点击数据列表
    handleClick (row, event, column) {
      if (row.status === 0) {
        this.btnAudit = false
      } else {
        this.btnCancel = false
      }
      this.saveStaus = true
      // this.btnAdd = true
      this.btnSave = false
      this.btnDel = false
      this.form = row
    },
    handleSearch () {
      getDetailByExperimentNumber({ experimentNumber: this.form.experimentNumber }).then((response) => {
        this.form = response.data
      })
    },
    handleSave () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            manageLateEdit(this.form).then((response) => {
              this.msgSuccess("保存成功")
              // this.btnAdd = false
              this.btnSave = true
              this.btnDel = true
              this.btnAudit = true
              this.btnCancel = true
              this.addStaus = true
              this.form = {}
              this.getList()
            })
          } else {
            this.form.status = 0
            manageLateSave(this.form).then((response) => {
              this.msgSuccess("保存成功")
              // this.btnAdd = false
              this.btnSave = true
              this.btnDel = true
              this.btnAudit = true
              this.btnCancel = true
              this.addStaus = true
              this.form = {}
              this.getList()
            })
          }

        }
      })
    },
    handleDel () {
      this.$confirm('是否确认删除该数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        return manageLateDel(this.form.id)
      }).then(() => {
        this.saveStaus = false
        // this.btnAdd = false
        this.btnSave = true
        this.btnDel = true
        this.btnAudit = true
        this.btnCancel = true
        this.form = {}
        this.getList()
        this.msgSuccess("删除成功")
      })
    },
    //审核
    handleAudit () {
      this.form.status = 1
      this.$confirm('是否确认审核该数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        return manageLateEdit(this.form)
      }).then(() => {
        this.saveStaus = false
        // this.btnAdd = false
        this.btnSave = true
        this.btnDel = true
        this.btnAudit = true
        this.btnCancel = true
        this.form = {}
        this.getList()
        this.msgSuccess("审核成功")
      })
    },
    //取消审核
    //审核
    handleCancel () {
      this.form.status = 0
      this.$confirm('是否确认取消审核该数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        return manageLateEdit(this.form)
      }).then(() => {
        this.saveStaus = false
        // this.btnAdd = false
        this.btnSave = true
        this.btnDel = true
        this.btnAudit = true
        this.btnCancel = true
        this.form = {}
        this.getList()
        this.msgSuccess("取消成功")
      })
    },
    handleSelectionChange () {

    },
    handleQuery () {
      this.form = {}
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.getList()
        }
      })
    },
    resetQuery () {
      this.form = {}
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px !important;
}

.packages {
  position: relative;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;

  .container {
    height: 100%;
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
  }

  .container2 {
    border: 1px solid rgb(220, 223, 230);
    // border-radius: 4px;
    // display: flex;
    height: 45vh;
    overflow-y: auto;
    background-color: #d5e4fb;
    padding: 5px
  }

  .aside {
    width: 40%;
    border-right: 1px solid rgb(220, 223, 230);
    // padding: 15px;
    box-sizing: border-box;
    padding-bottom: 20px;
    position: relative;
  }

  .main {
    width: 60%;
    padding: 15px;
    flex: 1;
    position: relative;
  }

  .container3 {
    display: flex;
    gap: 10px;
    background-color: #d5e4fb;
    width: 100%;
    height: 100vh;
    padding: 5px
  }

  .container4 {
    padding: 5px;
    background-color: #d5e4fb;
    width: 100%;
    height: 100vh;
  }

  .el-form-item__label-wrap {
    margin-left: 0px !important;
  }

  .demo-image__preview {
    position: relative;

    .el-icon-circle-close {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 99;
      font-size: 20px;
      color: white;
      cursor: pointer;
    }
  }

  .fontStyle {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 1rem;
  }
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}
</style>
